<template>
	<div class="detail">
		<div class="detail_content">
			<div class="title">{{ detail.title }}</div>
			<div v-if="author" class="art_info">
				<img :src="author.avatar" alt="头像" class="avatar" />
				<div class="author">
					<p class="name">{{ author.nickName }}</p>
					<div class="create_time">{{ detail.createTime }}</div>
				</div>
			</div>
			<div v-if="detail.cover" class="cover">
				<img :src="detail.cover" alt="封面" class="cover_img" />
			</div>
			<v-md-preview ref="preview" :text="detail.content"></v-md-preview>
		</div>
		<div v-if="catalogue.length" class="box">
			<div class="catalogue">
				<div
					v-for="(anchor, index) in catalogue"
					:key="index"
					:style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
					@click="handleAnchorClick(anchor)"
				>
					<a style="cursor: pointer">{{ anchor.title }}</a>
				</div>
			</div>
		</div>
	</div>
	<Footer />
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { useRoute } from 'vue-router'
import Footer from '@/views/Footer'
import { selectArticleDetail } from '@/service/content'

const route = useRoute()
const { infoId } = route.query
const detail = ref<any>({})
const author = ref<any>({})
const catalogue = ref<any>([])
const preview = ref()

async function queryArticleDetail() {
	const result = await selectArticleDetail({ infoId })
	detail.value = result
	author.value = result.author
	document.title = result.title

	await nextTick()
	const anchors = preview.value.$el.querySelectorAll('h1,h2,h3,h4,h5,h6')
	const titles = Array.from(anchors).filter((title: any) => !!title.innerText.trim())
	if (!titles.length) {
		catalogue.value = []
		return
	}
	const hTags = Array.from(new Set(titles.map((title: any) => title.tagName))).sort()
	catalogue.value = titles.map((el: any) => ({
		title: el.innerText,
		lineIndex: el.getAttribute('data-v-md-line'),
		indent: hTags.indexOf(el.tagName)
	}))
}
queryArticleDetail()

function handleAnchorClick(anchor: any) {
	const { lineIndex } = anchor
	const heading = preview.value.$el.querySelector(`[data-v-md-line="${lineIndex}"]`)
	if (heading) {
		preview.value.scrollToTarget({
			target: heading,
			scrollContainer: window,
			top: 60
		})
	}
}
</script>

<style lang="less" scoped>
.detail {
	display: flex;
	justify-content: center;
	width: 100%;
}
.box {
	width: 300px;
	// height: 100vh;
	// background: red;
}
.catalogue {
	position: fixed;
	// right: 0;
	top: 0;
	width: 300px;
	height: calc(100vh - 220px);
	overflow-y: scroll;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	padding: 20px;
}
.detail_content {
	width: 850px;
	min-height: 100vh;
	padding: 50px 20px;
	background: #fff;
	.art_info {
		display: flex;
		align-items: flex-end;
		width: calc(100% - 5rem);
		margin: 20px 2.5rem 0;
		.avatar {
			width: 40px;
			border-radius: 50%;
			margin-right: 20px;
		}
		.author {
			.name {
				font-size: 17px;
			}
			.create_time {
				font-size: 13px;
				color: #7c7c7c;
			}
		}
	}
	.cover {
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(100% - 5rem);
		max-height: 400px;
		margin: 20px 2.5rem 0;
		overflow: hidden;
		.cover_img {
			width: 100%;
		}
	}
	.title {
		font-size: 30px;
		padding: 0 2.5rem;
	}
}
</style>
